<template>
  <div id="IndexWS">
    <div class="w1190 indexWs">
      <div class="text-box">
        <img src="//image01.homedo.com/Files/Images/cms/www/20210818/5548595069937682324_pic1.png" alt="">
        <div class="content">
          <h2>
            filters 过滤器
          </h2>
          <p>
            Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
          </p>
        </div>
      </div>
      <div class="text">
        <quill-editor v-model="content"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)">
        </quill-editor>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">

export default {
  name: 'IndexWS',
  data () {
    return {
      content:'<h3>1、过滤器在列表中的运用</h3><pre class="ql-syntax" spellcheck="false">\n&lt;!-- 在双花括号中 --&gt;\n{{ message | capitalize }}\n\n&lt;!-- 在 `v-bind` 中 --&gt;\n&lt;div v-bind:id="rawId | formatId"&gt;&lt;/div&gt;\n\n&lt;template&gt;\n&nbsp;&lt;div&gt;\n&nbsp;&nbsp;&lt;el-table&gt;\n&nbsp;&nbsp;&nbsp;&lt;el-table-column label="导入时间" width="150px" align="center"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;template slot-scope="scope"&gt;{{ scope.row.insertTime | timeFormat }}&lt;/template&gt;\n&nbsp;&nbsp;&nbsp;&lt;/el-table-column&gt;\n&nbsp;&nbsp;&lt;/el-table&gt;\n&nbsp;&lt;/div&gt;\n&lt;/template&gt;\n&lt;script&gt;\nimport moment from \'moment\'\nexport default {\n&nbsp;filters: {\n&nbsp;&nbsp;timeFormat(value) {\n&nbsp;&nbsp;&nbsp;if (value &lt;= 0) {\n&nbsp;&nbsp;&nbsp;&nbsp;return \'\'\n&nbsp;&nbsp;&nbsp;} else {\n&nbsp;&nbsp;&nbsp;&nbsp;return moment(value).format(\'YYYY-MM-DD HH:mm:ss\')\n&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;}\n&nbsp;}\n}\n&lt;/script&gt;\n\n</pre><p><br></p><h3>2、过滤器在数组筛选数时的运用</h3><pre class="ql-syntax" spellcheck="false">let selections = [{name: \'云槿\'，age: 21}, {name: \'\'，age: 22}]\nconst temArr = selections.filter(v =&gt; v.name !== \'\')\nconsole.log(temArr)&nbsp; // 数组里是返回符合条件的对象：[{name: \'云槿\'，age: 21}]\n</pre>',
      editorOption:{}
    }
  },
  components:{
    
  },
  mounted() {
    document.documentElement.scrollTop = 0;
  },
  methods: {
    onEditorBlur(val){
      console.log(val,'111111111',this.content);
    },
    onEditorFocus(val){
      console.log(val,'222222222',this.content);
    },
    onEditorReady(val){
      console.log(val,'3333333333',this.content);
    }
  }
}
</script>
<style scoped="scoped">
  
#IndexWS{
  background: #F6F6F6;
}
.w1190{
  width: 1190px;
  margin: 30px auto;
}
.jrjlb-home{
  padding: 40px 0 24px 0;
}

.jrjlb-home-auditorium ul li{
  padding: 30px;
  margin-bottom: 50px;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  background: #FFFFFF;
}
 .indexWs .text-box {
    background: #fff;
    padding: 27px 26px;
    -webkit-box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 30px;
    height: 240px;
    line-height: 250px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .indexWs .text-box img {
    width: 340px;
    height: 186px;
    margin-right: 32px;
  }

  .indexWs .text-box .content {
    display: flex;
    flex-direction: column;
  }

  .indexWs .text-box .content h2 {
    font-size: 30px;
    font-weight: bold;
    line-height: 30px;
    margin-bottom: 24px;
  }

  .indexWs .text-box .content p {
    font-size: 16px;
    line-height: 28px;
  }

  .text{
    background: #fff;
    padding: 26px 26px;
    -webkit-box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 30px;
    height: 900px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  /deep/ .ql-container{
    height: 780px !important;
  }
</style>
